import React, { Component } from 'react'
import './index.css'
import { openNotification } from '../../../util/util'
import { reqDoctorsList, reqOrderDoctor, reqListOrders } from '../../../api'

export default class index extends Component {
  state = {
    // 根据返回的医生列表，以及患者的预约来确定
    // 0-无法预约 1-点击预约 2-预约成功
    myclass: ['none', '', 'success', 'none'],
    myType: ['无法预约', '点击预约', '预约成功', '不可再预约'],
    doctors: [],
    appointmentTypes: [], 
  }
  componentDidMount = async () => {
    // 所有医生
    const doctors = (await reqDoctorsList()).data
    // 患者的预约
    const appointments = (await reqListOrders()).data || []
    console.log('appointments', appointments)
    // 患者预约的医生及预约状态
    const uids = appointments.map(appointment => {
      return {
        uid: appointment.doctor.uid,
        status: appointment.status,
      }
    })
    // 判断所有医生对患者的预约类型——默认为 1 可预约
    const appointmentTypes = new Array(doctors.length).fill(1)
    doctors.forEach((doctor, index) => {
      // 0 - 不可预约
      if (doctor.restNum <= 0) {
        appointmentTypes[index] = 0
        return
      }
      // 2 - 预约完成
      let res = uids.some(item => {
        // 仅 status === 0 为预约成功状态，单号删除和完成都属于 不可再预约状态
        return item.uid === doctor.uid && item.status === 0
      })
      if (res) {
        appointmentTypes[index] = 2
        return
      }
      // 3 - 不可再预约
      res = uids.some(item => {
        // 单号删除和完成都属于 不可再预约状态
        return item.uid === doctor.uid && [2, 3].includes(item.status)
      })
      if (res) {
        appointmentTypes[index] = 3
        return
      }
    })
    this.setState({doctors, appointmentTypes})
  }
  handleClick = async (index) => {
    const appointmentTypes = [...this.state.appointmentTypes]
    const appointmentType = appointmentTypes[index]
    if (appointmentType === 0) {
      openNotification({description: '暂无预约名额'})
    } else if (appointmentType === 1) {
      appointmentTypes[index] = 2
      const uid = this.state.doctors[index].uid
      await reqOrderDoctor({uid})
      this.setState({appointmentTypes})
      openNotification({description: '预约成功', type: 'success'})
    } else if (appointmentType === 2) {
      openNotification({description: '预约成功，无法再预约', type: 'info'})
    } else if (appointmentType === 3) {
      openNotification({description: '预约已取消或已完成，今日不可再预约，请明日再来'})
    }

  }
  render() {
    const { doctors, appointmentTypes, myclass, myType } = this.state
    return (
      <div className="appointment">
        <div className="a_items">
        {
          doctors.map((doctor, index) => {
            return (
              <div className="a_item">
                <table className="table">
                  <tbody>
                    <tr><td>医生</td><td>{doctor.name}</td></tr>
                    <tr><td>性别</td><td>{doctor.sex}</td></tr> 
                    <tr><td>科室</td><td>{doctor.department}</td></tr> 
                    <tr><td>介绍</td><td>{doctor.background}</td></tr> 
                    <tr><td>状态</td><td>{doctor.status}</td></tr>
                    <tr><td>可预约</td><td>{doctor.restNum} 人</td></tr>
                  </tbody>
                </table>
                <span className={`click ${myclass[appointmentTypes[index]]}`}
                  onClick={() => this.handleClick(index)}
                >{myType[appointmentTypes[index]]}</span>
              </div>
            )
          })
        }

        </div>
      </div>
    )
  }
}
